<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>

  <div id="app">
    <h1 v-if="score >= 90">优秀</h1>
    <h1 v-else-if="score >= 80">良好</h1>
    <h1 v-else-if="score >= 70">中等</h1>
    <h1 v-else-if="score >= 60">合格</h1>
    <h1 v-else>不合格</h1>


    <h1>{{result}}</h1>

  </div>


  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        score: 99
      },
      computed: {
        result() {
          let showMessage = '';
          if(this.score >= 90) {
            showMessage = '优秀'
          } else if (this.score >=80) {
            showMessage = '良好'
          } else if(this.score >= 60) {
            showMessage = '及格'
          } else {
            showMessage='不及格'
          }
          return showMessage;
        }
      }
    })
  </script>
</body>

</html>